<template>
  <div class="startPAE">
    <div slot="footer" class="dialog-footer clearfix">
      <div style="float: left; line-height: 32px;padding-left: 12px;">
        评估
        <span style='color: #999;font-size:12px;'>
          对预约的病人进行麻醉评估
        </span>
      </div>
      <div style="float: right;">
        <el-button type="primary" @click="submitForm('dialogLeftTop1_3_data',0)">暂存</el-button>
        <el-button type="success" @click="submitForm('dialogLeftTop1_3_data',1)">确认提交</el-button>
        <el-button type="info" @click="cancel">取 消</el-button>
      </div>
    </div>
    <div class="scrollWrap" ref = 'scrollWrap'>
      <div class="appointmentInfoBox">
        <div class="box">
          <appointment-info :appointment='appointmentInfo'></appointment-info>
        </div>
      </div>

      <div class="pathBox margin20">
        <div class="box">
          <h3>手术路径</h3>
          <surgery-path :appointment='appointment'></surgery-path>
        </div>
      </div>

      <div class="startPAEBox margin20">
        <div class="box">
          <h3>开始宣教</h3>
          <el-form :model="dialogLeftTop1_3_data" ref='dialogLeftTop1_3_data' :show-message=true
                  :rules="appointmentConfirmConst.dialogLeftTop1_1_data_rules" :inline="true">
            <el-form-item label="禁食" :label-width="formLabelWidth">
              <template>
                <el-radio-group v-model="dialogLeftTop1_3_data.intoHosEdu.fasting">
                  <el-radio :label="3">无</el-radio>
                  <el-radio :label="6">有</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
              <el-date-picker type="date" placeholder="选择日期" v-model="dialogLeftTop1_3_data.intoHosEdu.fastingStartTime" value-format="yyyy-MM-dd HH:mm:ss"
                              style='width: 196px;'></el-date-picker>
            </el-form-item>
            <el-form-item label="禁水" :label-width="formLabelWidth">
              <template>
                <el-radio-group v-model="dialogLeftTop1_3_data.intoHosEdu.forbidWater">
                  <el-radio :label="0">无</el-radio>
                  <el-radio :label="1">有</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
              <el-date-picker type="date" placeholder="选择日期" v-model="dialogLeftTop1_3_data.intoHosEdu.forbidWaterStarttime"
                              style='width: 196px;' value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="灌肠" :label-width="formLabelWidth">
              <template>
                <el-radio-group v-model="dialogLeftTop1_3_data.intoHosEdu.coloclyster">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <el-form-item label="开塞露" :label-width="formLabelWidth">
              <template>
                <el-radio-group v-model="dialogLeftTop1_3_data.intoHosEdu.kaiSailu">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
            <el-form-item label="药物" :label-width="formLabelWidth">
              <template>
                <el-radio-group v-model="dialogLeftTop1_3_data.intoHosEdu.existDrug">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>

            <el-form-item label="名称" :label-width="formLabelWidth" prop="card">
              <el-input v-model="dialogLeftTop1_3_data.intoHosEdu.drugName" auto-complete="off" placeholder="请输入"
                        style='width: 196px'></el-input>
            </el-form-item>
            <el-form-item label="方法" :label-width="formLabelWidth" prop="card">
              <el-input v-model="dialogLeftTop1_3_data.intoHosEdu.mothed" auto-complete="off" placeholder="请输入"
                        style='width: 196px'></el-input>
            </el-form-item>
            <el-form-item label="携带资料" :label-width="formLabelWidth">
              <el-checkbox-group v-model="dialogLeftTop1_3_data.intoHosEdu.dataType">
                <el-checkbox :label="0">病例</el-checkbox>
                <el-checkbox :label="1">检验报告</el-checkbox>
                <el-checkbox :label="2">同位素肾图</el-checkbox>
                <el-checkbox :label="3">骨扫描</el-checkbox>
                <el-checkbox :label="4">X光片</el-checkbox>
                <el-checkbox :label="5">CT片</el-checkbox>
                <el-checkbox :label="6">MRI</el-checkbox>
                <el-checkbox :label="7">医保卡</el-checkbox>
                <el-checkbox :label="8">身份证</el-checkbox>
                <el-checkbox :label="9">押金</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="当天检查项" :label-width="formLabelWidth" prop="ID">
              <el-input v-model="dialogLeftTop1_3_data.intoHosEdu.checkItem" auto-complete="off" placeholder="请输入"
                        style='width: 196px'></el-input>
            </el-form-item>
            <el-form-item label="特别注意项" :label-width="formLabelWidth" prop="ID">
              <el-input v-model="dialogLeftTop1_3_data.intoHosEdu.warningItem" auto-complete="off" placeholder="请输入"
                        style='width: 196px'></el-input>
            </el-form-item>
            <el-form-item label="宣教类型" :label-width="formLabelWidth">
              <dict-select v-model="dialogLeftTop1_3_data.intoHosEdu.eduRecordType" placeholder="请选择" style='width: 196px' dict-code="xjlx" @change="refreshEduRecord">
              </dict-select>
            </el-form-item>
            <el-form-item label="宣教内容" :label-width="formLabelWidth">
              <el-select v-model="dialogLeftTop1_3_data.intoHosEdu.eduRecordId" remote filterable reserve-keyword placeholder="请选择" :remote-method="getHealthEdu"
                         :loading="loading" style='width: 196px'>
                <el-option v-for="item in eduContents" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-button type='primary' @click = 'sendMsg()'>发送短信</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import appointmentInfo from '@/yimiviews/components/appointmentInfo'
  import surgeryPath from '@/yimiviews/components/path'
  import { appointmentConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
  import { read } from '@/api/appointmentManage/appointmentConfirm'
  import { savePae, read as readPae } from '@/api/appointmentManage/pae'
  import { page as healthEduPage } from '@/api/knowledgeManage/healthPropaganda'
  import _ from 'lodash'
  import DictSelect from '@/views/form/dictSelect'
  export default {
    components: { DictSelect, appointmentInfo, surgeryPath },
    created() {
      this.getPatientInfo()
    },
    data() {
      return {
        appointmentInfo: {},
        appointment: {
          path: 4
        },
        radio2: '', // 要删除的
        checkbox: [], // 要删除的
        appointmentConfirmConst,
        dialogLeftTop1_3_data: {
          id: '',
          type: '',
          intoHosEdu: {
            id: '',
            appointNo: '',
            fasting: '',
            fastingStartTime: '',
            forbidWater: '',
            forbidWaterStarttime: '',
            coloclyster: '',
            kaiSailu: '',
            existDrug: '',
            drugName: '',
            drugCode: '',
            mothed: '',
            dataType: [],
            deposit: '',
            checkItem: '',
            warningItem: '',
            eduRecordId: '',
            sendMsg: ''
          }
        },
        dialogLeftTop1_1_data_anesthesiaDoctorList: [],
        anticoagulantTypeOther: '',
        options: [],
        formLabelWidth: '120px',
        eduContents: [],
        loading: false
      }
    },
    mounted() {
      this.setAppMainHeight()
    },
    methods: {
      getPatientInfo() {
        read(this.$route.params.id).then(res => {
          this.appointmentInfo = res.data.data
        })
        readPae(this.$route.params.id).then(res => {
          if (res.data.data) {
            this.dialogLeftTop1_3_data.intoHosEdu = res.data.data
            this.dialogLeftTop1_3_data.intoHosEdu.dataType = _.map(res.data.data.dataType.split(','), x => parseInt(x))
          }
        })
      },
      sendMsg() {},
      submitForm(formName, type) {
        var tipText = ['保存成功！', '提交成功！']
        this.dialogLeftTop1_3_data.id = this.$route.params.id
        this.dialogLeftTop1_3_data.type = type
        const postdata = JSON.parse(JSON.stringify(this.dialogLeftTop1_3_data))
        postdata.intoHosEdu.dataType = postdata.intoHosEdu.dataType.join(',')
        savePae(postdata).then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: tipText[type],
              type: 'success',
              duration: 2000
            })
            if (type === 1) {
              this.$root.closeTag()
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      cancel() {
        this.$root.closeTag()
      },
      setAppMainHeight() {
        const bodyHeight = document.body.offsetHeight
        const appMainHeight = bodyHeight - 180
        this.$refs.scrollWrap.style.height = appMainHeight + 'px'
      },
      getHealthEdu(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            healthEduPage({
              page: 1,
              limit: 5,
              type: this.dialogLeftTop1_3_data.intoHosEdu.eduRecordType,
              keyword: query
            }).then(res => {
              this.eduContents = res.data.list
              this.loading = false
            })
          }, 200)
        } else {
          this.dialogLeftTop1_1_data_doctorList = []
        }
      },
      refreshEduRecord() {
        this.dialogLeftTop1_3_data.intoHosEdu.eduRecordId = ''
        this.getHealthEdu(' ')
      }
    }
  }
</script>
<style lang="scss">
  .startPAE {
    padding-bottom: 20px;
    background-color: #f0f2f5;
    .margin20 {
      margin: 20px;
      background-color: #fff;
    }
    .box {
      padding: 20px;
    }
    .scrollWrap{
      min-height: 100%;
      overflow: auto;
    }
    .dialog-footer {
      padding: 10px;
      background-color: #fff;
      margin-bottom: 20px;
    }
    .appointmentInfoBox {
      background-color: #fff;
      padding: 0 20px;
    }
  }
</style>

